<template>
  <div>
    <Header :head="head" />
    <div style="padding-top:5vw;">
      <div class="text text1">
        <input type="text" v-model="us" placeholder="用户名" />
      </div>
      <div class="text text2">
        <input v-if="show" placeholder="密码" type="password" name id v-model="value" />
        <input v-if="!show" placeholder="密码" type="text" v-model="value" />
        <mt-switch @change="show = !show"></mt-switch>
      </div>
      <div class="text text3">
        <input type="text" v-model="code" placeholder="验证码" />
        <Captcha />
      </div>
      <div class="tx">
        <p>温馨提示：未注册过的账号，登录时将自动注册</p>
        <p>注册过的用户可凭用户名密码登录</p>
      </div>

      <input type="button" value="登录" @click="login" />
      <div class="go">
        <!--
        <a href @click.prevent="log('注册')">前往注册</a>-->
        <a href @click.prevent="kk">暂不登陆</a>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../common/Header'
//import mui from '../../../lib/mui/js/mui.min.js'
import { Toast } from 'mint-ui'
import Captcha from '../../common/Captcha'
export default {
  components: {
    Header,
    Captcha
  },
  data() {
    return {
      head: '登录',
      show: true, // 登录 显示密码
      value: null, // 登录 密码
      usTips: null, //登录 手机号提示
      us: null, //登录 手机号
      src: null, //验证码图片
      code: null //验证码
    }
  },
  methods: {
    login() {
      //手机号11位数,纯数字,密码不得低于6位数
      if (
        Buffer.byteLength(this.value) < 6 ||
        /[\u4e00-\u9fa5]/g.test(this.us) ||
        /[\u4e00-\u9fa5]/g.test(this.value)
      ) {
        Toast({
          message: '账号或密码格式有误',
          duration: 1000
        })
      } else {
        this.toastInstanse = Toast({
          message: '登陆中...',
          duration: -1
        })
        //let body = {us:this.us, ps:this.value}
        //window.console.log(JSON.stringify({us:this.us, ps:this.value}))
        //把手机号和密码转换成json字符串,然后发送
        this.$http
          .post(
            'v2/login',
            JSON.stringify({
              username: this.us,
              password: this.value,
              captcha_code: this.code
            })
          )
          .then(data => {
            //返回值信息
            //err: 0 说明没有错误,登录成功
            //err: -1 说明账号密码错误
            //err: 1 说明服务器出错
            //msg是服务器返回的信息说明
            //window.console.log(data.body.err)
            if (data.body.type) {
              this.toastInstanse.close()
              Toast({
                message: data.body.message,
                duration: 1000
              })
            } else {
              localStorage.setItem('user', JSON.stringify(data.body)) //把用户信息保存到缓存中
              window.console.log(data.body)
              this.toastInstanse.close()
              this.kk()
            }
          })
          .catch(() => {
            //请求异常时触发
            this.toastInstanse.close()
            Toast({
              message: '登录异常,请检查网络',
              duration: 1000
            })
          })
      }
    },
    kk() {
      window.location.hash = '/major/home'
    }
  }
}
</script>
<style  scoped>
input[type='text'],
input[type='password'] {
  margin: 0 !important;
  border: none !important;
}
p {
  margin: 0;
  font-size: 0.5rem;
}
.text {
  position: relative;
  border-bottom: 1px #aaa solid;
}
.text1 {
  border-top: 1px #aaa solid;
}
.text > a {
  position: absolute;
  right: 5vw;
  top: 3vw;
  font-size: 4vw;
}
.text2 > input {
  padding-right: 30%;
}
.mint-switch {
  position: absolute;
  right: 5vw;
  top: 4px;
}
input[type='button'] {
  margin: 5vw 5% 0 5%;
  width: 90%;
  background-color: #26a2ff;
}
.go {
  position: relative;
  height: 10vw;
}
.go > a:first-child {
  position: absolute;
  left: 5vw;
}
.go > a:last-child {
  position: absolute;
  right: 5vw;
}
.text3 {
  display: flex;
}
.text3 > input {
  flex: 3;
}
.tx {
  padding-top: 5vw;
  padding-left: 5vw;
}
.tx > p {
  color: red;
}
</style>